<template>
  <n-flex class="echarts-box-small">
    <v-chart :option="option" autoresize :loading="false"/>
  </n-flex>
</template>

<script setup>
import {defineProps, reactive} from 'vue';

// 组件接收的值
const props = defineProps({
  optionLegend: {
    type: Array,
    default: ['默认1']
  },
  optionData: {
    type: Array,
    default: ['默认1','默认2','默认3','默认4','默认5']
  },
  optionSeriesName: {
    type: String,
    default: '默认1'
  },
  optionSeriesData: {
    type: Array,
    default: [120, 132, 101, 134, 90, 230, 210]
  }

})


const option = reactive({
    title: {
      text: '模型预测结果'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: props.optionLegend
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: props.optionData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: props.optionSeriesName,
        type: 'line',
        stack: 'Total',
        data: props.optionSeriesData
      }
    ]
})
</script>

<style scoped>

</style>
